<!-- 上网行为日志 -->
<template>
  <div class="actionLog">
    <header class="actionLog-header">
      <SearchBar 
       :accordingTo="true"
       @educe="educe"
       @query="query" />
    </header>

    <main class="actionLog-main">

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table-border"
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column 
         v-for="(item , index) in tableHeader"
         :key="index"
         :prop="item.prop" 
         :label="item.label" 
         :min-width="item.width"
         show-overflow-tooltip
        >
        </el-table-column>
       
      </el-table>

      <!-- 分页器 -->
       <pagination
        :total="total"
        :page.sync="page.currentPage"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { SearchBar } from "./components/index";
import Pagination from "@/components/Pagination";
import action from '@/api/internetManagement'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SearchBar , Pagination},
  data() {
    //这里存放数据
    return {
      tableData: [],

      searchValue:{}, //搜索值

      page:{ //分页器数据
         currentPage:1,
         pageSize:10
      },
      total:0,

      tableHeader: [ //表格头部数据
        {
          label:'源ip地址',
          prop:'sourceIp',
        },
        {
          label:'源端口',
          prop:'sourcePort',
        },
        {
          label:'源mac地址',
          prop:'sourceMac',
        },
        {
          label:'目标IP地址',
          prop:'destIp',
        },
        {
          label:'目标端口',
          prop:'destPort',
        },
        {
          label:'目标mac地址',
          width:'120',
          prop:'destMac',
        },
        {
          label:'访问类型',
          prop:'netType',
        },
        {
          label:'访问内容',
          prop:'netData',
        },
        {
          label:'网页标题',
          prop:'webTitle',
        },
        {
          label:'行为类型',
          prop:'actionType',
        },
        {
          label:'访问开始时间',
          width:'120',
          prop:'startTime',
        },
        {
          label:'结束时间',
          prop:'endTime',
        },
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

    //获取表格数据
    getList() {
      let data = {...this.page , ...this.searchValue}
      action.surfData(data).then(res=>{
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    //导出文件
    educe() {
      action.downloadFailedUsingJson(this.searchValue)
    },

    //查询
    query(value) {
      this.searchValue = value;
      this.page.currentPage = 1;
      this.getList()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList()
  },
};
</script>

<style lang='scss' scoped>
.actionLog {
  padding: 20px;
  .actionLog-main {
    margin-top: 20px;
  }
}
</style>